<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=1510195133000">
</head>
<body class="pz-contain">
<h2>进度条</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-process"></em>
  <span class="title">进度条</span>
</div>
<div class="pz-boxbody fn-pd20">
  <div class="pz-progress">
    <div class="progress-bar progress-info fn-rate20">20%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-success fn-rate40">40%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-warning fn-rate60">60%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-danger fn-rate80">80%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-info progress-striped fn-rate20">20%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-success progress-striped fn-rate40">40%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-warning progress-striped fn-rate60">60%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-danger progress-striped fn-rate80">80%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-info progress-striped progress-active fn-rate20">20%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-success progress-striped progress-active fn-rate40">40%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-warning progress-striped progress-active fn-rate60">60%</div>
  </div>
  <div class="pz-progress fn-mt20">
    <div class="progress-bar progress-danger progress-striped progress-active fn-rate80">80%</div>
  </div>
</div>
<h2 class="fn-mt20">信息条</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-comments"></em>
  <span class="title">信息条</span>
</div>
<div class="pz-boxbody fn-pd20">
  <div class="pz-msgbar">
    <em class="msgbar-close pz-icon icon-close"></em>
    <strong>default!</strong>
  </div>
  <div class="pz-msgbar msgbar-info fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <strong>Info!</strong> you're not looking too good.
  </div>
  <div class="pz-msgbar msgbar-success fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <strong>Success!</strong> Libero, a pharetra augue. Praesent commodo
  </div>
  <div class="pz-msgbar msgbar-warning fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <strong>Warning!</strong> Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  </div>
  <div class="pz-msgbar msgbar-error fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <strong>Error!</strong> Nulla vitae elit libero, a pharetra augue. Praesent commodo
  </div>
  <div class="pz-msgbar msgbar-block fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <div class="msgbar-title">default!</div>
  </div>
  <div class="pz-msgbar msgbar-info msgbar-block fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <div class="msgbar-title">Info!</div>
    you're not looking too good.
  </div>
  <div class="pz-msgbar msgbar-success msgbar-block fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <div class="msgbar-title">Success!</div>
    Libero, a pharetra augue. Praesent commodo
  </div>
  <div class="pz-msgbar msgbar-warning msgbar-block fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <div class="msgbar-title">Warning!</div>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  </div>
  <div class="pz-msgbar msgbar-error msgbar-block fn-mt20">
    <em class="msgbar-close pz-icon icon-close"></em>
    <div class="msgbar-title">Error!</div>
    Nulla vitae elit libero, a pharetra augue. Praesent commodo
  </div>
</div>
</body>
</html>